<template>
	<Container>
		<view class="header">
			<view class="article" v-if="isArticleShow">
				<view
					v-for="(item, index) in assignment.optionArticles[current]"
					:key="index"
					:class="{ tapColor: chooses[index] === 'select' }"
					@tap="tap(item, index)"
					hover-class="touch"
					hover-stay-time="300"
				>
					{{ item.name }}
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { times } from '../../../common/mixins/assignmentTimes.js'
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins,times],
	components: { AudioIcon, Question, Container },
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	max-width 65vh
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 5vh 0
	position relative
	.article
		animation outIn .4s
		display flex
		justify-content center
		align-content flex-start
		flex-wrap wrap
		height 65vh
		width 720rpx
		view
			width 50%
			height 30%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			font-size 15vh
			color black
			filter drop-shadow(5rpx 5rpx 5rpx #c4c4c4)
			-webkit-text-stroke 7rpx white
			font-family 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
			font-weight 600
.tapColor
	color #FF7053 !important
</style>
